<script setup lang="ts">

const props = defineProps({
  UserInfo: {
    type: Object,
    required: true
  }
});
const emit = defineEmits(["handleClick"]);
const handleEventClick = (type: string) => {
  emit('handleClick',type) // 触发事件
}
</script>
<template>
  <div class="user-info-box">
    <div class="flex items-center py-2 border-b px-2.5">
      <div class="pr-2">
        <el-avatar
          :size="50"
          :src="props.UserInfo.avatar||'https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp'"
        ></el-avatar>
      </div>
      <div class="">
        <h6 class="text-lg">{{props.UserInfo.nickname||props.UserInfo.username||'暂无昵称'}}</h6>
        <span class="text-sm text-secondary">{{props.UserInfo.email||'暂无邮箱'}}</span>
      </div>
    </div>
    <ul class="nav-list">
      <li class="px-1.5  py-1">
        <router-link
          to="/"
          class="flex py-2 items-center px-1.5  rounded-sm nav-list-item text-secondary"
          style=""
        >
          <span
            class="i-akar-icons-css-fill text-sm text-icon  mr-0.5"
          ></span>
          <span class="text-sm ">文档</span>
        </router-link>
      </li>
      <li class="px-1.5  py-1">
        <router-link
          to="/"
          class="flex py-2 items-center px-1.5  rounded-sm nav-list-item text-secondary"
        >
          <span
            class="i-akar-icons-css-fill text-sm text-icon  mr-0.5"
          ></span>
          <span class="text-sm ">GitHub</span>
        </router-link>
      </li>
      <li class="border-b px-1.5  py-0.5">
        <router-link
          to="/"
          class="flex py-2 items-center px-1.5 rounded-sm nav-list-item text-secondary"
        >
          <span
            class="i-akar-icons-css-fill text-sm text-icon  mr-0.5"
          ></span>
          <span class="text-sm ">问题&反馈</span>
        </router-link>
      </li>
      <li class="border-b px-1.5 py-1">
        <div
          class="flex justify-between items-center py-1.5 px-1.5 rounded-sm w-full nav-list-item text-secondary"
          @click="handleEventClick('lock')"
        >
          <div
            class="flex items-center"
            style="padding: 0px; justify-content: start; height: 25px"
          >
            <span class="i-akar-icons-css-fill text-sm text-icon mr-0.5"></span>
            <span class=" ">锁定屏幕</span>
          </div>
          <span class="text-xs">ALT L</span>
        </div>
      </li>
      <li class="px-1.5 py-1">
        <div
          class="flex justify-between items-center py-1.5 px-1.5 rounded-sm w-full nav-list-item text-secondary" @click="handleEventClick('logout')"
        >
          <div
            class="flex items-center"
            style="padding: 0px; justify-content: start; height: 25px"
          >
            <span class="i-akar-icons-css-fill text-sm text-icon mr-0.5"></span>
            <span class=" ">退出登录</span>
          </div>
          <span class="text-xs">ALT K</span>
        </div>
      </li>
    </ul>
  </div>
</template>
<style scoped lang="scss">
.nav-list {
  .nav-list-item {
    &:hover {
      background-color: var(--bg-page-color);
      cursor: pointer;
    }
  }
}
</style>
